<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
		<script src="./jquery-3.6.0.min.js"></script>
		<script>
			$(function(){
				/**
				 * date参数传递：  id=100，name=tom, age=18
				 * 1.对象方式数据传参
				 * 		语法：{key:value,key2:value2}
				 * 2.拼接字符串的方式
				 * 		语法： key1=value1 & key2=value2
				 * */
				$.ajax({
					type: "get",
					url: "http://localhost:8090/findAll",
					// date: {id:100,name:"tom",age:18},
					// data: "id=100&name=tom&age=18",
					success: function(date){
						// for(var i=0;i<date.length;i++){
						// 	console.log(date[i])
						// }
						// for(index in date){
						// 	console.log(date[index])
						// }
						for(user of date){
							// let id = user.id
							// let name = user.name
							// let age = user.age
							// let sex = user.sex
							let tr = `
								<tr>
									<td>${user.id}</td>
									<td>${user.name}</td>
									<td>${user.age}</td>
									<td>${user.sex}</td>
									<td align="center">
										<button type="submit">提交</button>
										<button type="reset ">删除</button>
									</td>
								</tr>
							`
							$("#tab1").append(tr)
						}
					}
				})
			})
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" width="80%" align="center">
			<tr align="center" height="60%">
				<th colspan="5">用户列表</th>
			</tr>
			<tr align="center" height="60%">
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</table>
		
	</body>
</html>
